<template>
    <div  class="userEdit">
         <Header  title="账号管理"/>
         <div class="input-item">
            <van-cell-group inset>
               <van-field v-model="nickName" label="昵称" placeholder="请输入昵称" />
               <van-field v-model="introduceSign" label="个性签名" placeholder="请输入签名" />
               <van-field v-model="password" label="密码" placeholder="请输入密码" />
            </van-cell-group>

         </div>

         <van-button type="primary"  block  round color = '#ffc400' class="save-btn" @click="save">修改密码</van-button>
         <van-button type="primary"  block  round color = '#ffc400' class="save-btn" @click="logout">退出登录</van-button>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import Header from "../../components/Header.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default {

    components:{Header,},
    setup () {

        const  router = useRouter()
        const state = reactive({
            nickName:'',
            password:'',
            introduceSign:'长风破浪会有时'
        })
    




    // 1、保存修改后的密码

    const  save =()=>{
        if(state.nickName && state.password){

            const  userInfo = JSON.parse(localStorage.userInfo)
            const  newUserInfo = {
                用户名:state.nickName || userInfo['用户名'],
                密码:state.password || userInfo['密码']
            }

            localStorage.setItem('userInfo',JSON.stringify(newUserInfo))

            Toast('修改用户名及密码成功')
            router.push('/mine')
        }else{
            Toast('请输入新的用户名及密码')
        }
    }
      

    // 2、退出登录

    const  logout = ()=>{
        localStorage.removeItem('isLogin')
        Toast('退出登录')
        router.push('/login')
    }



        return {
            ...toRefs(state),
            save,
            logout
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>